<script>
import SearchBar from '../components/SearchBar.vue';


const deviceHeight = (750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight) - 350;
export default {
  components: { SearchBar },
  data() {
    return {
      deviceHeight,
      showLogo: false
    }
  },
  computed: {
    list() {
      return this.$store.state.category.data;
    }
  },
  created() {
    this.$store.dispatch('getCategory');
  }
}
</script>
<template>
  <div class="page category-page">
    <div class="header">
      <search-bar :showLogo="showLogo"></search-bar>
    </div>
    <div class="content">
      <scroller class="category-list" :style="{'height':deviceHeight}" :show-scrollbar="false">
        <div class="category-list-item" v-for="(item,$index) in list" :key="$index">
          <text class="category-label">{{item.category_name}}</text>
        </div>
      </scroller>
      <list class="category-content" :style="{'height':deviceHeight}">
        <cell v-for="(items,$index) in list" :key="$index">
          <div class="section" v-for="(item,$index) in items.category_list" :key="$index">
            <cellsAutoFill v-if="item.view_type==='cells_auto_fill'" :list="item.body.items"></cellsAutoFill>
            <categoryTitle v-else-if="item.view_type==='category_title'" :name="item.body.category_name"></categoryTitle>
            <categoryGroup v-if="item.view_type==='category_group'" :list="item.body.items"></categoryGroup>
          </div>
        </cell>
      </list>
    </div>
  </div>
</template>
<style scoped>
.content {
  flex-direction: row;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #eee;
}

.category-list {
  width: 200px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #eee;
}

.category-list-item {
  justify-content: center;
  height: 100px;
}

.category-label {
  text-align: center;
  font-size: 25px;
}

.category-content {
  width: 550px;
}
</style>
